hast-util-to-estree
Advanced tools
The `hast-util-to-estree` package is a utility that converts HAST (Hypertext Abstract Syntax Tree) to ESTree (ECMAScript Tree). This is particularly useful for projects that need to manipulate HTML or Markdown content and then transform it into JavaScript code structures.
Convert HAST to ESTree
This feature allows you to convert a HAST node into an ESTree node. The code sample demonstrates converting a simple HAST node representing a <div> element into its ESTree equivalent.
const toEstree = require('hast-util-to-estree');
const hast = { type: 'element', tagName: 'div', properties: {}, children: [] };
const estree = toEstree(hast);
console.log(estree);Handling different HAST node types
This feature shows how the utility handles different types of HAST nodes, including text nodes. The code sample converts a HAST node representing a <p> element with text content into its ESTree equivalent.
const toEstree = require('hast-util-to-estree');
const hast = { type: 'element', tagName: 'p', properties: {}, children: [{ type: 'text', value: 'Hello, world!' }] };
const estree = toEstree(hast);
console.log(estree);The `rehype-parse` package is used to parse HTML into HAST. While it doesn't convert HAST to ESTree, it is often used in conjunction with `hast-util-to-estree` to first parse HTML and then convert it to JavaScript structures.
The `unist-util-visit` package is a utility for traversing Unist syntax trees, which include HAST. It doesn't convert HAST to ESTree but can be used to manipulate HAST nodes before conversion.
hast utility to transform a tree to estree JSX.
npm:
npm install hast-util-to-estree
Say we have the following HTML file, example.html:
<!doctype html>
<html lang=en>
<title>Hi!</title>
<link rel=stylesheet href=index.css>
<h1>Hello, world!</h1>
<a download style="width:1;height:10px"></a>
<!--commentz-->
<svg xmlns="http://www.w3.org/2000/svg">
<title>SVG `<ellipse>` element</title>
<ellipse
cx="120"
cy="70"
rx="100"
ry="50"
/>
</svg>
<script src="index.js"></script>
And our script, example.js, is:
var fs = require('fs')
var parse5 = require('parse5')
var fromParse5 = require('hast-util-from-parse5')
var toEstree = require('hast-util-to-estree')
var recast = require('recast')
var hast = fromParse5(parse5.parse(String(fs.readFileSync('example.html'))))
var estree = toEstree(hast)
estree.comments = null // `recast` doesn’t like comments on the root.
console.log(recast.prettyPrint(estree).code)
Now, node example (and prettier), yields:
;<>
<html lang="en">
<head>
<title>{'Hi!'}</title>
{'\n'}
<link rel="stylesheet" href="index.css" />
{'\n'}
</head>
<body>
<h1>{'Hello, world!'}</h1>
{'\n'}
<a
download
style={{
width: '1',
height: '10px'
}}
/>
{'\n'}
{/*commentz*/}
{'\n'}
<svg xmlns="http://www.w3.org/2000/svg">
{'\n '}
<title>{'SVG `<ellipse>` element'}</title>
{'\n '}
<ellipse cx="120" cy="70" rx="100" ry="50" />
{'\n'}
</svg>
{'\n'}
<script src="index.js" />
{'\n'}
</body>
</html>
</>
toEstree(tree, options?)Transform a hast tree to an estree (JSX).
optionsspace (enum, 'svg' or 'html', default: 'html')
— Whether node is in the 'html' or 'svg' space.
If an svg element is found when inside the HTML space, toEstree
automatically switches to the SVG space when entering the element, and
switches back when exitingestree — a Program node, whose last child in body is most
likely an ExpressionStatement whose expression is a JSXFragment or a
JSXElement.
Typically, there is only one node in body, however, this utility also supports
embedded MDX nodes in the HTML (when mdast-util-mdx is used
with mdast to parse markdown before passing its nodes through to hast).
When MDX ESM import/exports are used, those nodes are added before the fragment
or element in body.
Comments are both attached to the tree in their neighbouring nodes (recast and
babel style), and added as a comments array on the program node (espree
style).
You may have to do program.comments = null for certain compilers.
There aren’t many great estree serializers out there that support JSX.
recast does a fine job.
Or use estree-util-build-jsx to turn JSX into function
calls and then serialize with whatever (astring, escodegen).
You’re working with JavaScript. It’s not safe.
hastscript
— Hyperscript compatible interface for creating nodeshast-util-from-dom
— Transform a DOM tree to hastunist-builder
— Create any unist treexastscript
— Create a xast treeestree-util-build-jsx
— Transform JSX to function callsSee contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
hast utility to transform to estree (JavaScript AST) JSX
The npm package hast-util-to-estree receives a total of 16,140 weekly downloads. As such, hast-util-to-estree popularity was classified as popular.
We found that hast-util-to-estree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.